<script setup>

import FileUploadService from "@/service/impl/FileUploadService.js";
import {inject} from "vue";
import ChatService from "@/service/impl/ChatService.js";


const t = inject('$t')
const message = inject('message')
const list = ref([])
const checkList = ref([])
const props = defineProps({
    modelId: {
        type: Number,
        default: null
    }
})

const init = (id) => {
    // 查看文件
    ChatService.modeFileList({
        modelId: id
    }).then(res => {
        list.value = res.data
    })
}
const uploadImage = (type) => {
    if(!props.modelId){
        message.warning("请选择模式")
        return
    }
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = '.txt,.pdf,.doc,.docx,.json,.md,.java';
    if (type === 1) {
        input.onchange = (event) => {
            const file = event.target.files[0];
            if (file) {
                uploadSingleImage(file);
            }
        };
    } else if (type === 2) {
        input.multiple = true;
        input.onchange = (event) => {
            const files = event.target.files;
            if (files.length > 0) {
                uploadBatchImages(files);
            }
        };
    }
    input.click();
}

const uploadSingleImage = (file) => {
    // 这里可以添加上传逻辑，例如使用FormData和fetch或axios发送文件
    FileUploadService.uploadStrategy({
        file: file,
        path: 'model/'+props.modelId,
        class: 'chatProxy',
        modelId: props.modelId
    }).then(res => {
        message.success("上传成功")
        init(props.modelId)
        removeInput()
    })
    // console.log('Uploading single image:', file);
}

const uploadBatchImages = (files) => {
    // 这里可以添加上传逻辑，例如使用FormData和fetch或axios发送文件
    FileUploadService.uploadStrategyBatch({
        files: files,
        path: 'model/'+props.modelId,
        class: 'chatProxy',
        modelId: props.modelId
    }).then(res => {
        message.success("上传成功")
        init(props.modelId)
        removeInput()
    })
    // console.log('Uploading batch images:', validFiles);
}

const removeInput = () => {
    const inputElement = document.getElementById('input');
    const parentElement = inputElement.parentNode;
    parentElement.removeChild(inputElement);
}

const delFiles = () => {
    ChatService.modeFileDel(checkList.value).then(res => {
        message.success("删除成功")
        init(props.modelId)
    })
}

defineExpose({
    init
})

</script>

<template>
<el-row>
    <el-row class="file-list">
        <el-checkbox-group v-model="checkList"  >
            <el-checkbox class="file-list-item" v-for="(item,index) in list" :key="index" :label="item.name" :value="item.url" />
        </el-checkbox-group>
    </el-row>
    <el-row class="file-button">
        <el-dropdown class="file-button-fun" >
            <el-button style="width: 100%;height: 100%" type="primary"> 文件处理 </el-button>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item @click="uploadImage(1)">单文件上传</el-dropdown-item>
                    <el-dropdown-item @click="uploadImage(2)">批量文件上传</el-dropdown-item>
                    <el-dropdown-item @click="delFiles">删除文件</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </el-row>
</el-row>
</template>

<style scoped lang="scss">
.file-button{
    height: 6%;
    width: 100%;
    border-top: 1px solid var(--el-menu-border-color);

    .file-button-fun{
        width: 100% !important;
        text-align: center !important;
        height: 100%;
        :deep(.el-button){
            border-radius: 0 !important;
        }
    }

}
.file-list{
    height: 94%;
    width: calc(100%);
    display: flex;
    align-content: start;
    padding: 5px;
    overflow-y: auto;
    overflow-x: hidden;

    .file-list-item{
        width: calc(100% - 10px);
    }
    :deep(.el-checkbox){
        height: auto;
        margin-bottom: 10px;
    }
}
</style>